<template>
  <div class="dynamic">
    <div class="listbox">
      <div class="focuslist">
        <div class="userbox" v-for="item in list" :key="item.userId">
          <div class="userava">
            <img :src="item.avatarUrl" alt="" />
          </div>
          <p>{{ item.nickname }}</p>
        </div>
      </div>
    </div>
    <div class="topic">
        <p class="topichrad"> 
            <span>热门话题</span><span>在这里找到属于你的话题</span>
        </p>
        <div class="hotTopic"
         v-for="(item,index) in info" 
         :key="index"
         @click="toitem(item.actId)"
         >
              <p class="topicTitles">#{{ item.title }}#</p>
        <p class="fsttext">{{ item.text[0] }}</p>
        <p class="sectext">{{ item.text[1] }}</p>
        <p class="topicimg"><img :src="item.sharePicUrl" alt="" /></p>
        <p class="futext">{{ item.text[2] }}</p>
        <p class="partiycipate">有{{ item.participateCount }}人参与了该话题</p>
        </div>
    </div>
  </div>
</template>

<script>
import axios from "../../../axios/index"
import { loadFocusAPI } from "@/api/like.js";
export default {
  data() {
    return {
      list: [],
      info:[]
    };
  },
  computed: {},
  watch: {},

  methods: {
    async loadfocus() {
      const result = await loadFocusAPI({ uid: "308180065" });
      console.log(result);
      this.list = result.data.follow;
      console.log(this.list);
    },
    async showfocu(){
        let offset=parseInt(-Math.random()*10);
        axios.get(`/hot/topic?&offset=${offset}`, { withcredentials: true })
            .then((res)=>{
                console.log(res)
                this.info=res.data.hot
            })
    },
    toitem(id){
        this.$router.push("/topic/"+id)
    }
  },
  created() {
    this.loadfocus();
    this.showfocu()
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.userbox{
  text-align: center;
  width: 45px;
  font-size: 12px;
  margin-left: 15px;
}
.userava {
  width: 45px;
  height: 45px;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
}
.userbox p {
  width: 50px;
  margin-top: -1px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.focuslist {
  width: 100%;
  height: 70px;
  display: flex;
  overflow-x: scroll;
  /* overflow-x: visible; */
}
.userava img {
  width: 45px;
  height: 45px;
}
.listbox {
  height: 63px;
  overflow: hidden;
  margin-top: 8px;
}
.hotTopic {
  margin-bottom: 20px;
  padding: 10px;
}
.hotTopic img {
  width: 100%;
  height: 100%;
}
.topicTitles {
  font-size: 14px;
  font-weight: bold;
  color: #6c8099;
}
.topicimg {
  width: 300px;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 10px;
}
.fsttext {
  font-size: 12px;
  color: #4f1500;
  margin-top: 15px;
}
.futext {
  margin-top: 10px;
  color: #6c8099;
  font-size: 12px;
}
.topichead {
  margin-top: 10px;
  font-size: 14px;
  padding: 10px;
}
.topichead span:nth-child(1) {
  font-size: 14px;
  font-weight: bold;
}
.topichead span:nth-child(2) {
  margin-left: 90px;
  font-size: 14px;
  color: #c75070;
  /* font-weight: bold; */
}
.sectext {
  font-size: 12px;
  color: #c20c0c;
  margin-top: 10px;
}
.partiycipate {
  font-size: 12px;
  margin-top: 5px;
  /* color: #349ae0; */
}
.topic {
  padding-bottom: 50px;
}
</style>
